import FirstTitle from "@/components/FirstTitle";
import SubTitle from "@/components/subTitle";
import Code from "@/components/code";
import EffectContainer from "@/components/effectContainer";
import { useEffect, useState } from "react";
import axios from "axios";
import "./index.scss";

export const Cube = () => {
  const [code, setCode] = useState("");
  const [css, setCss] = useState("");

  useEffect(() => {
    axios.get(`${window.origin}/code/cube/代码.txt`).then(({ data }) => {
      setCode(data);
    });
    axios.get(`${window.origin}/code/cube/css.txt`).then(({ data }) => {
      setCss(data);
    });
  }, []);
  return (
    <>
      <FirstTitle title="Css 魔方" />
      <SubTitle title="效果" />

      <EffectContainer
        effect={
          <div className="box">
            <div className="item">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div className="item">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div className="item">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div className="item">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div className="item">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div className="item">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        }
        code={<Code content={code} />}
        css={<Code content={css} type="css" />}
      ></EffectContainer>
    </>
  );
};
